<template>
  <div class="lowpriceContent">
    <div class="lowpriceNavBar">
      <van-nav-bar
        z-index="9999999999"
        :title="goodsDetail.productName"
        @click-left="backPage"
        :left-arrow="true"
        :border="false"
      ></van-nav-bar>
    </div>
    <div class="hei"></div>
    <div class="lowpriceSwiper">
      <van-swipe @change="onChange" :autoplay="0">
        <van-swipe-item>
          <video-player
            class="video-player"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions(goodsDetail.videoUrl)"
          ></video-player>
        </van-swipe-item>
        <van-swipe-item v-for="(swiper,i) in goodsDetail.albumPics" :key="i">
          <img :src="swiper" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/{{goodsDetail.albumPics.length+1}}</div>
        </template>
      </van-swipe>
    </div>
    <div class="goods_header_info">
      <div class="goods_header_contant">
        <div class="goods_tit">{{goodsDetail.productName}}</div>
        <div class="goods_header_item">
          <div class="goods_pr">
            <span>最新报价</span>
            <span class="span1">￥</span>
            {{goodsDetail.offerPrice}}
          </div>
          <div class="goods_p2">仅剩{{goodsDetail.surplusStock}}件</div>
        </div>
        <div class="goods_header_item">
          <div class="or_pr">
            <s>市场价￥{{goodsDetail.averagePrice}}</s>
          </div>
          <div class="or_pr">销量{{goodsDetail.salesVolume}}万</div>
        </div>
        <!-- 特殊商品有倒计时 -->
        <div class="goods_header_item" v-if="productType != 1">
          <div class="goods_num_down">
            <div class="goods_na">倒计时</div>
            <count-down :time="endTime" />
          </div>
          <div class="goods_na3">加价幅度：不限/￥{{goodsDetail.onlineRange}}元</div>
        </div>
      </div>
    </div>
    <div>
      <img class="img_cu" :src="require('../../assets/images/home_banner.png')" alt />
    </div>
    <div class="goods_header_info bg_y">
      <div class="goods_header_contant bg_y1">当日17:00之前下单，当日发货，17:00之后下单，第二天发货</div>
    </div>
    <div class="goods_header_info bott_padd">
      <div class="goods_header_contant">
        <div class="goods_par">商品参数</div>
        <div class="param_box">
          <div class="param_item">
            <div>
              <img :src="require('../../assets/images/cs_1.png')" alt /> 单位
            </div>
            <div class="param_a">{{goodsDetail.flowerUnit}}</div>
          </div>
          <div class="param_item">
            <div>
              <img :src="require('../../assets/images/cs_2.png')" alt /> 规格
            </div>
            <div class="param_a">{{goodsDetail.productSpecification}}</div>
          </div>
          <div class="param_item">
            <div>
              <img :src="require('../../assets/images/cs_3.png')" alt /> 等级
            </div>
            <div class="param_a">{{productGrade[Number(goodsDetail.productGrade)-1]}}级</div>
          </div>
          <div class="param_item">
            <div>
              <img :src="require('../../assets/images/cs_4.png')" alt /> 颜色
            </div>
            <div class="param_a">{{goodsDetail.color}}</div>
          </div>
          <div class="param_item">
            <div>
              <img :src="require('../../assets/images/cs_5.png')" alt /> 长度
            </div>
            <div class="param_a">{{goodsDetail.productLength}}MM</div>
          </div>
        </div>
      </div>
    </div>
    <div class="blue_pad"></div>
    <div class="goods_header_info">
      <div class="goods_header_contant flex">
        <div class="addre">发货地</div>
        <div class="adr_1">{{goodsDetail.producingArea}}</div>
      </div>
    </div>
    <div class="blue_pad"></div>
    <div class="goods_header_info bott_padd">
      <div class="goods_header_contant">
        <div class="goods_par">商品行情图</div>
        <div class="param_box">
          <van-swipe class="sw_eat" :autoplay="0">
            <van-swipe-item class="sw_eat" v-for="(swiper,i) in swiper" :key="i">
              <div class="unit">单位：元/束</div>
              <div :id="'main'+i" class="each"></div>
              <div class="unit1">时间：时</div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <div class="blue_pad"></div>
    <div class="goods_header_info">
      <div class="goods_header_contant flex pot_top">
        <div class="goods_shop">
          <img :src="shopInfo.businessLogo" alt />
          <div>
            <div class="shop_name">{{shopInfo.businessName}}</div>
            <div class="shop_name2">在售商品120件</div>
          </div>
        </div>
        <div class="od_box">
          <div class="od">在线咨询</div>
          <div class="od2">进入店铺</div>
        </div>
      </div>
    </div>
    <div class="blue_pad"></div>
    <template v-if="productType == 4">
        <div class="goods_tar">
            <div
                @click="detailIndex = i"
                :class="i == detailIndex ? 'sele_bar' : ''"
                v-for="(item, i) in ['商品详情', '出价记录']"
                :key="i"
            >{{item}}</div>            
        </div>
        <div class="blue_pad"></div>
    </template>
    <template v-else>
        <div class="goods_tar_details">商品详情</div>
    </template>
    <div v-if="detailIndex == 1">
      <div v-for="(item, i) in quotations" :key="i" class="goods_header_info g_4">
        <div class="goods_header_contant">
          <div class="goods_log">
            <div class="goods_con">
              <img :src="require('../../assets/images/home_banner.png')" alt />
              <div>
                <div class="g_1">{{item.businessName}}</div>
                <div class="g_2">{{item.createTime}}</div>
              </div>
            </div>
            <div class="g_3">
              <span>￥</span>
              {{item.auctionPrice}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="detailIndex == 0">
      <div>
        <div class="shop_de">商品详情</div>
      </div>
      <div v-html="goodsDetail.detail"></div>
    </div>
    <div class="blue_pad"></div>
    <template v-if="productType == 4">
        <div class="goods_header_info bott_padd">
            <div class="goods_header_contant">
                <div class="goods_par">拍卖规则</div>
                <div class="p_box">
                <div class="radus"></div>
                <div>每次出价不能低于最新报价</div>
                </div>
                <div class="p_box">
                <div class="radus"></div>
                <div>如果有加价幅度，每次加价不能低于加价幅度</div>
                </div>
                <div class="p_box">
                <div class="radus"></div>
                <div>竞拍成功后，需要补缴订单费用，如果不补缴费用，那么平台视为放弃本次竞拍订单，同时你参与竞拍缴纳的保证金不予退还</div>
                </div>
                <div class="p_box">
                <div class="radus"></div>
                <div>如果你参与竞拍没有成功，那么你参与本次竞拍的保证金 将会全额退款到你的余额账户</div>
                </div>
                <div class="p_box">
                <div class="radus"></div>
                <div>竞拍产品经过本平台的质量检测，请放心竞拍</div>
                </div>
                <div class="p_box">
                <div class="radus"></div>
                <div>竞拍成功后补缴费用=你竞拍成功的单价*本次拍卖的数量-参与本次竞拍的保证金+服务费+打包费</div>
                </div>
                <div class="p_box">
                <div class="radus"></div>
                <div>竞拍成功后，需要在一个小时补缴尾款，如果一小时内未补缴尾款，视为放弃本次竞拍订单，竞拍保证金不退还。系统会自动关闭此竞拍订单</div>
                </div>
                <div class="p_box">
                <div class="radus"></div>
                <div>竞拍成功后，系统会自动创建一个交易订单，买家需要到我的订单里面补缴此订单的尾款</div>
                </div>
            </div>
        </div>
        <div class="goods_header_info bg_y">
            <div class="goods_header_contant bg_y2">
                拍卖说明
                <br />参与拍卖需要先缴纳保证金，出价竞拍成功，保证金作为抵扣货物费用，竞拍失败，保证金扣除支付手 续费0.6%后退款到用户余额账户
            </div>
        </div>
        <div class="blue_pad"></div>
    </template>
    <template v-else-if="productType == 2">
        <div class="goods_header_info bott_padd">
            <div class="goods_header_contant">
                <div class="goods_par">团购规则</div>
                <div class="p_box">
                <div class="radus"></div>
                <div>团购开始时间到了以后才能开始团购</div>
                </div>
                <div class="p_box">
                <div class="radus"></div>
                <div>团购时间结束后不能参与团购</div>
                </div>
                <div class="p_box">
                <div class="radus"></div>
                <div>团购库存没有后，不能参与团购</div>
                </div>
                <div class="p_box">
                <div class="radus"></div>
                <div>团购购买数量没有达到最低成团数量，本次团购失败，系统自动返还参与团购的订单金额到用户的账户余额</div>
                </div>
                <div class="p_box">
                <div class="radus"></div>
                <div>每个团购商品都经过平台质量检验，请放心参与团购</div>
                </div>
            </div>
        </div>
        <div class="blue_pad"></div>
    </template>
    
    <div class="goods_header_info bott_padd">
      <div class="goods_header_contant">
        <div class="goods_par">购买须知</div>
        <div class="p_box">
          <div class="radus"></div>
          <div>因商品的特殊性，交易成功确认收货后，发现商品质量问题才能退款</div>
        </div>
        <div class="p_box">
          <div class="radus"></div>
          <div>单品损坏率低于5%并且每扎损坏率低于10%，不予退款和赔付（因为商品的特殊，存在损坏率，谢谢谅解）</div>
        </div>
        <div class="p_box">
          <div class="radus"></div>
          <div>单品每扎损坏率高于10%小于30%，按照此单品损坏的扎数总金额*30%进行退款</div>
        </div>
        <div class="p_box">
          <div class="radus"></div>
          <div>单品每扎损坏率高于30%低于50%，按照此单品损坏的扎数总金额*50%进行退款</div>
        </div>
        <div class="p_box">
          <div class="radus"></div>
          <div>单品每扎损坏率高于50%，按照此单品损坏的扎数总金额全额退款</div>
        </div>
        <div class="p_box">
          <div class="radus"></div>
          <div>单品损坏率高于5%，每扎损坏率低于10%，按照此单品损坏的扎数总金额*10%退款</div>
        </div>
        <div class="p_box">
          <div class="radus"></div>
          <div>买家收到包裹后，需要先扫码后确认收货后才能拆箱，如果买家未扫码拆箱，或撕毁二维码直接拆箱，出现任何产品质量问题，不予任何赔付，买家自行负责</div>
        </div>
        <div class="p_box">
          <div class="radus"></div>
          <div>当日17:00之前下单，当日发货，17：00之后下的订单第二天发货</div>
        </div>
      </div>
    </div>
    <div class="blue_pad"></div>
    <div class="hei"></div>
    <div class="bottom_pay">
      <div class="bott_btn">
        <img :src="require('../../assets/images/xq_xx.png')" alt />
        <div class="go_1">
          在线沟通
          <span>99+</span>
        </div>
      </div>
      <div class="join_cart" @click="isBuy = true">加入购物车</div>
      <div class="buy" @click="isBuy = true">立即购买</div>
    </div>
    <van-popup v-model="isBuy" closeable close-icon="close" round position="bottom" @close="handleIsBuyClose">
      <!-- 拍卖 -->
      <div class="popup_box" v-if="productType == 2">
        <div class="pop_tit2">立即出价</div>
        <div class="pop_item">
          <div class="pop_tit">
            <span>最新报价￥</span>78.88
          </div>
          <div class="pop_pic">起拍价：￥18.88</div>
        </div>
        <div class="pop_item top">
          <div class="pop_pic gra">加价幅度：不限/￥5元</div>
          <div class="pop_pic gra">拍卖数量：10011件</div>
        </div>
        <div class="pop_item top">
          <div class="pop_pic">加价幅度</div>
          <van-stepper class="steper" v-model="value" input-width="25px" button-size="25px" />
        </div>
        <div class="buy_btn">立即付款</div>
      </div>
      <template v-else>
           <!-- 普通 -->
        <div class="popup_box" v-if="!sureBuy">
            <div class="pop_info">
            <div class="pop_img_box">
                <img :src="require('../../assets/images/home_banner.png')" alt />
                <img class="pop_tag" :src="require('../../assets/images/tg_tb.png')" alt />
            </div>
            <div>
                <div class="pop_pi_l">
                <span>￥</span>{{goodsDetail.offerPrice}}
                </div>
                <div class="tag_box">
                <span v-for="(item) in [1,2,3,4]" :key="item">A级</span>
                </div>
                <div class="tag_aa">仅剩{{goodsDetail.surplusStock}}件</div>
            </div>
            </div>
            <div class="sku_box">
            <div class="sku_tit">开放度</div>
            <div class="sku_item">
                <div
                @click="seleSku = i"
                :class="i == seleSku ? 'sku_item_1 sele_sku': 'sku_item_1' "
                v-for="(item, i) in [1,2,3,4,5,6,7]"
                :key="i"
                >{{item}}度</div>
            </div>
            </div>
            <div class="pop_item top bo_pa">
            <div class="pop_pic">购买数量</div>
            <van-stepper class="steper" v-model="value" input-width="25px" button-size="25px" :max="goodsDetail.surplusStock"/>
            </div>
            <div class="pop_item top_bor">
            <div class="buy_item" @click="handleAddCard">加入购物车</div>
            <div class="buy_item green" @click="sureBuy = true">立即购买</div>
            </div>
        </div>
        <!-- 确认付款 -->
        <div div class="popup_box" v-else>
            <div class="pop_tit2">确认付款</div>
            <div class="pop_pi_l pop_pi_lbig">
                <span>￥</span>{{goodsDetail.offerPrice * value}}
            </div>
            <div class="pop_item top1">
            <div class="pop_pic">订单信息</div>
            <div class="pop_i">{{goodsDetail.productName}}</div>
            </div>
            <div class="pop_item top1">
            <div class="pop_pic">付款方式</div>
            <div class="pop_i">余额支付</div>
            </div>
            <div class="buy_btn">立即购买</div>
        </div>
      </template>
     
    </van-popup>
  </div>
</template>

<script>
/**
 * 商品详情 接收两个参数 id 和 productType
 * productType (string, optional): 产品类型 1-普通商品；2-团购商品；3-特价商品；4-拍卖商品
 */

import { shoppingService } from "@/api";

export default {
  name: "lowprice",
  data() {
    return {
      seleSku: 0,
      value: 0,
      isBuy: false,
      current: 0,
      detailIndex: 0,
      endTime: 0,
      quotations: [],
      productGrade: ["A", "B", "C", "D"],
      swiper: [],
      goodsDetail: {
          albumPics: []
      },
      shopInfo: {},
      sureBuy: false
    };
  },
  computed: {
      productId(){
          return this.$route.query.id
      },
      productType(){
          return this.$route.query.productType
      }
  },

  mounted() {
    setTimeout(() => {
      this.swiper.map((item, i) => {
        this.drawLine(i);
      });
    }, 300);

    this.getGoodsDetail();
    this.getShopInfo()
  },

  methods: {

    async getShopInfo () {
      const { data } = await shoppingService.getShopInfo()
      this.shopInfo = data
      console.log(data)
    },

    async getQuotationList(id) {
      const { data } = await shoppingService.getQuotationList({
        id,
        page: 1,
        pageSize: 4
      });
      this.quotations = data.list;
    },


    async getGoodsDetail() {
      const { data } = await shoppingService.getGoodsDetail({
        id: this.$route.query.id,
        productType: this.$route.query.productType
      });
      this.goodsDetail = data;
      this.goodsDetail.albumPics = data.albumPics.split(",");

      if (false) {
        this.getQuotationList(data.id);
      }

      this.endTime =
        (new Date(data.endTime).getTime() - new Date().getTime()) / 1000;
    },

    // 轮播图
    onChange(index) {
      this.current = index;
    },
    // 这里返回上一页并不一定是返回网站的上一页，也有可能是APP的所以需要进行判断
    backPage() {
      this.$router.go(-1);
    },
    handleIsBuyClose(){
        setTimeout(() => {
            this.sureBuy = false
        }, 500)       
    },
    async handleAddCard(){
        const {productId, productType, userId} = this.goodsDetail
        const { data } = await shoppingService.addCart({
            productId, productType, userId,
            productOpenness: this.seleSku,
            quantity: this.value
        });
        this.isBuy = false
    },


    playerOptions(videoUrl) {
      return {
        // playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", // 类型
            src: videoUrl // url地址
          }
        ],
        poster: "", // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false, // 当前时间和持续时间的分隔符
          durationDisplay: false, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: false // 是否显示全屏按钮
        }
      };
    },
    // 统计图
    drawLine(i) {
      const myChart = this.$echarts.init(document.getElementById(`main${i}`));
      myChart.setOption({
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00"],
          splitLine: { show: false },
          axisLine: { show: false },
          axisTick: { show: false }
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          name: "销售台数",
          // min: 0,
          // max: 200,
          // interval: 20,
          axisLabel: {
            formatter: "{value} 台"
          }
        },
        series: [
          {
            data: [8, 9, 8, 9, 8, 9, 8],
            type: "line",
            symbolSize: 10,
            smooth: true,
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#00C657"
                  },
                  {
                    offset: 1,
                    color: "rgba(0,198,87,0.2)"
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: "#00C657",
                lineStyle: {
                  color: "#00C657"
                }
              }
            }
          }
        ],
        grid: {
          top: "15px",

          left: "50px",

          right: "5px",

          bottom: "50px",

          backgroundColor: "#fff",

          width: "80%", //图例宽度

          height: "80%" //图例高度
        }
      });
    }
  }
};
</script>
<style>
.van-nav-bar .van-icon {
  color: #333333;
  font-size: 21px;
}
.video-js {
  height: 100% !important;
}
.vjs-big-play-button {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.vjs-control-bar {
  display: none;
}
</style>
<style lang="scss" scoped>
.lowpriceSwiper {
  position: relative;
  img {
    width: 100%;
    height: 450px;
  }
  .video-player {
    height: 450px;
    width: 100%;
    position: relative;
  }
}
.lowpriceContent {
  background-color: white;
}
.custom-indicator {
  position: absolute;
  right: 15px;
  bottom: 15px;
  font-size: m-w(22);
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: m-w(16);
}
.goods_header_info {
  width: 100%;
  background: white;

  .goods_tit {
    margin-top: 14px;
    width: 100%;
    font-size: m-w(32);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    // @extend .over_el;
  }
  .goods_header_contant {
    padding: 0 m-w(26);
  }
  .goods_header_item {
    width: 100%;
    @extend .flex;
    margin-top: 14px;
  }
  .goods_pr {
    font-size: m-w(36);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 98, 0, 1);
    .span1 {
      font-size: m-w(24);
    }
  }
  .goods_p2 {
    padding: 7px m-w(25);
    background: rgba(255, 240, 230, 1);
    border-radius: m-w(5);
    font-size: m-w(20);
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(255, 98, 0, 1);
  }
  .or_pr {
    font-size: m-w(22);
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(169, 174, 192, 1);
  }
  .goods_na {
    font-size: m-w(28);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    margin-right: m-w(19);
  }
  .goods_na3 {
    font-size: m-w(20);
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }
  .goods_num_down {
    @extend .flex;
    justify-content: flex-start;
  }
}
.lowpriceNavBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999999999;
}
.hei {
  width: 100%;
  height: 46px;
}
.img_cu {
  width: 100%;
  height: 60px;
  margin-top: 15px;
}
.bg_y {
  background: rgba(255, 240, 230, 1);
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 98, 0, 1);
  text-align: center;
}
.bg_y1 {
  padding: 13px m-w(49) !important;
  margin-top: 13px;
}
.bg_y2 {
  @extend .bg_y1;
  text-align: left;
  line-height: 25px;
}
.goods_par {
  margin-top: 22px;
  font-size: m-w(32);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.param_box {
  padding: 0 m-w(27);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.08);
  border-radius: m-w(5);
  margin-top: 16px;
  padding-bottom: 16px;
}
.param_item {
  width: 100%;
  @extend .flex;
  padding-top: 15px;
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  img {
    width: 15px;
    height: 15px;
    margin-right: m-w(14);
  }
  div {
    display: flex;
    align-items: center;
  }
  .param_a {
    font-size: m-w(28);
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }
}
.bott_padd {
  padding-bottom: 21px;
}
.blue_pad {
  width: 100%;
  height: 12px;
  background: #f7f9fc;
}
.addre {
  padding: 15px 0;
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
}
.adr_1 {
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
.sw_eat {
  width: 100%;
}
.unit {
  padding-top: 10px;
  font-size: m-w(20);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
.unit1 {
  @extend .unit;
  text-align: right;
}
.each {
  width: 100%;
  height: 230px;
}
.goods_shop {
  display: flex;
  align-items: center;
  img {
    width: 45px;
    height: 45px;
    border-radius: 45px;
    margin-right: m-w(20);
  }
  .shop_name {
    font-size: m-w(28);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
  }
  .shop_name2 {
    font-size: m-w(20);
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
    margin-top: 8px;
  }
}
.od {
  width: m-w(139);
  height: 27px;
  background: rgba(255, 98, 0, 1);
  border-radius: m-w(5);
  font-size: m-w(24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}
.od2 {
  @extend .od;
  color: rgba(255, 255, 255, 1);
  background: #00c657;
  margin-left: m-w(21);
}
.od_box {
  @extend .flex;
  justify-content: flex-start;
}
.pot_top {
  padding: 10px 0;
}
.shop_de {
  font-size: m-w(32);
  margin-left: m-w(32);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 15px;
  padding-top: 20px;
}
.radus {
  width: 5px;
  height: 5px;
  background: rgba(0, 198, 87, 1);
  border-radius: 50%;
  margin-right: m-w(15);
  margin-top: 8px;
}
.p_box {
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 20px;
  display: flex;
  align-items: flex-start;
  margin-top: 14px;
}
.bottom_pay {
  position: fixed;
  left: 0;
  bottom: 0;
  justify-content: flex-end;
  background: white;
  @extend .flex;
  height: 46px;
  width: 100%;
}
.bott_btn {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 18px;
    height: 18px;
    margin-right: m-w(12);
  }
}
.go_1 {
  font-size: m-w(28);
  position: relative;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 198, 87, 1);
  span {
    color: rgba(255, 255, 255, 1);
    font-size: m-w(16);
    padding: 2px 6px;
    background: #ff6200;
    border-radius: m-w(10);
    position: absolute;
    top: -13px;
    right: -26px;
  }
}
.join_cart {
  width: 33.33%;
  background: rgba(255, 240, 230, 1);
  @extend .flex;
  justify-content: center;
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: bold;
  height: 100%;
  color: rgba(255, 98, 0, 1);
}
.buy {
  font-size: m-w(28);
  @extend .flex;
  justify-content: center;
  height: 100%;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  width: 33.33%;
  background: rgba(3, 199, 112, 1);
}
.goods_tar {
  width: 100%;
  display: flex;
  align-items: center;
  div {
    height: 45px;
    width: 50%;
    @extend .flex;
    justify-content: center;
    background: rgba(3, 199, 112, 1);
    font-size: m-w(32);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
  }
  .sele_bar {
    background: rgba(0, 0, 0, 1);
  }
}
.goods_tar_details {
    height: 45px;
    @extend .flex;
    margin-left: m-w(24);
    font-size: m-w(32);
    font-family: PingFang SC;
    font-weight: bold;
  }
.goods_log {
  @extend .flex;
  img {
    width: 42px;
    height: 42px;
    margin-right: m-w(21);
    border-radius: 40px;
  }
  .g_1 {
    font-size: m-w(28);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
  }
  .g_2 {
    margin-top: 11px;
    font-size: m-w(20);
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(169, 174, 192, 1);
  }
  .g_3 {
    font-size: m-w(36);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 98, 0, 1);
    span {
      font-size: m-w(24);
    }
  }
}
.goods_con {
  display: flex;
}
.g_4 {
  border-bottom: 1px solid #ebebeb;
  padding: 18px 0;
}
.popup_box {
  padding: 25px m-w(41);
}
.pop_tit2 {
  font-size: m-w(36);
  width: 100%;
  text-align: center;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  justify-content: center;
  margin-bottom: 30px;
}
.pop_item {
  @extend .flex;
  width: 100%;
}
.pop_tit {
  font-size: m-w(36);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 98, 0, 1);
  span {
    font-size: m-w(24);
  }
}
.pop_pic {
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
.top {
  margin-top: 18px;
}
.gra {
  color: #a9aec0;
}
.steper {
  input {
    font-size: m-w(28);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(0, 198, 87, 1);
  }
}
.buy_btn {
  width: 100%;
  background: rgba(0, 198, 87, 1);
  border-radius: m-w(10);
  font-size: m-w(32);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(254, 255, 254, 1);
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 140px;
}
.pop_info {
  display: flex;
  padding-bottom: 16px;
  border-bottom: 1px solid #eeeef8;
  .pop_img_box {
    width: 90px;
    height: 90px;
    position: relative;
    margin-right: m-w(39);
    overflow: hidden;
    border-radius: 5px;
    img {
      width: 100%;
      height: 100%;
    }
    .pop_tag {
      width: 47px;
      height: 16px;
      position: absolute;
      left: 0;
      top: 9px;
    }
  }
}
.pop_pi_l {
  span {
    font-size: m-w(24);
  }
  font-size: m-w(36);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 98, 0, 1);
}
.pop_pi_lbig {
    font-size: m-w(56);
    text-align: center;
}
.tag_box {
  margin-top: 10px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  span {
    margin-top: 10px;
    padding: 6px;
    background: rgba(235, 235, 235, 1);
    font-size: m-w(20);
    margin-right: m-w(18);
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(169, 174, 192, 0.8);
    border-radius: 2px;
  }
}
.tag_aa {
  font-size: m-w(20);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
  margin-top: 15px;
}
.sku_box {
  padding: 15px 0;
  border-bottom: 1px solid #eeeef8;
  .sku_tit {
    font-size: m-w(28);
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }
}
.sku_item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.sku_item_1 {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(238, 238, 248, 1);
  border-radius: m-w(32);
  font-size: m-w(24);
  margin-right: m-w(26);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  width: m-w(110);
  height: 31px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sele_sku {
  background: rgba(0, 198, 87, 1);
  color: rgba(255, 255, 255, 1);
}
.bo_pa {
  padding-bottom: 20px;
}
.buy_item {
  width: m-w(297);
  height: 45px;
  font-size: m-w(32);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(254, 255, 254, 1);
  background: rgba(255, 98, 0, 1);
  border-radius: 10px;
  @extend .flex;
  justify-content: center;
}
.top_bor {
  padding-top: 25px;
  border-top: 1px solid #eeeef8;
}
.green {
  background: rgba(0, 198, 87, 1);
}
.pop_i {
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
}
.top1 {
  padding: 20px 0;
  border-bottom: 1px solid #eeeef8;
}
</style>
